<template>
  <div class="cemetery-background">
    <!-- 星空层 -->
    <div class="starfield">
      <div 
        v-for="star in stars" 
        :key="star.id"
        class="star"
        :style="{
          left: star.x + '%',
          top: star.y + '%',
          width: star.size + 'px',
          height: star.size + 'px',
          animationDelay: star.delay + 's',
          animationDuration: star.duration + 's'
        }"
      ></div>
    </div>

    <!-- 雾气层 -->
    <div class="fog-layer">
      <div class="fog fog-1"></div>
      <div class="fog fog-2"></div>
      <div class="fog fog-3"></div>
    </div>

    <!-- 烛光效果层 -->
    <div class="candlelight-layer">
      <div class="candle-glow candle-1"></div>
      <div class="candle-glow candle-2"></div>
      <div class="candle-glow candle-3"></div>
    </div>

    <!-- 阴影纹理层 -->
    <div class="shadow-texture"></div>

    <!-- 主背景渐变 -->
    <div class="main-gradient"></div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'

// 生成随机星星
const stars = ref([])

const generateStars = () => {
  const starCount = 150
  const newStars = []
  
  for (let i = 0; i < starCount; i++) {
    newStars.push({
      id: i,
      x: Math.random() * 100,
      y: Math.random() * 100,
      size: Math.random() * 3 + 1,
      delay: Math.random() * 10,
      duration: Math.random() * 8 + 4
    })
  }
  
  stars.value = newStars
}

onMounted(() => {
  generateStars()
})
</script>

<style scoped>
.cemetery-background {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -10;
  overflow: hidden;
  pointer-events: none;
}

/* 主背景渐变 */
.main-gradient {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: 
    radial-gradient(ellipse at 20% 30%, rgba(139, 69, 19, 0.08) 0%, transparent 50%),
    radial-gradient(ellipse at 80% 70%, rgba(75, 0, 130, 0.06) 0%, transparent 50%),
    radial-gradient(ellipse at 50% 90%, rgba(40, 40, 40, 0.15) 0%, transparent 70%),
    linear-gradient(180deg, #0a0a0a 0%, #1a1a1a 30%, #0f0f0f 70%, #0a0a0a 100%);
}

/* 星空效果 */
.starfield {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.star {
  position: absolute;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.9) 0%, rgba(255, 255, 255, 0.3) 50%, transparent 100%);
  border-radius: 50%;
  animation: twinkle linear infinite;
  filter: blur(0.5px);
}

.star:nth-child(3n) {
  background: radial-gradient(circle, rgba(255, 220, 150, 0.8) 0%, rgba(255, 220, 150, 0.2) 50%, transparent 100%);
}

.star:nth-child(5n) {
  background: radial-gradient(circle, rgba(150, 200, 255, 0.7) 0%, rgba(150, 200, 255, 0.2) 50%, transparent 100%);
}

/* 雾气效果 */
.fog-layer {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.fog {
  position: absolute;
  width: 120%;
  height: 120%;
  border-radius: 50%;
  filter: blur(40px);
  opacity: 0.03;
}

.fog-1 {
  top: -10%;
  left: -10%;
  background: radial-gradient(ellipse, rgba(255, 255, 255, 0.4) 0%, transparent 70%);
  animation: fogDrift1 25s ease-in-out infinite;
}

.fog-2 {
  bottom: -10%;
  right: -10%;
  background: radial-gradient(ellipse, rgba(200, 200, 255, 0.3) 0%, transparent 70%);
  animation: fogDrift2 30s ease-in-out infinite;
}

.fog-3 {
  top: 30%;
  left: 20%;
  width: 80%;
  height: 80%;
  background: radial-gradient(ellipse, rgba(255, 240, 200, 0.2) 0%, transparent 60%);
  animation: fogDrift3 35s ease-in-out infinite;
}

/* 烛光效果 */
.candlelight-layer {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.candle-glow {
  position: absolute;
  border-radius: 50%;
  filter: blur(30px);
  opacity: 0.02;
}

.candle-1 {
  top: 15%;
  left: 10%;
  width: 200px;
  height: 200px;
  background: radial-gradient(circle, rgba(255, 140, 0, 0.6) 0%, rgba(255, 100, 0, 0.3) 40%, transparent 70%);
  animation: candleFlicker1 3s ease-in-out infinite alternate;
}

.candle-2 {
  bottom: 20%;
  right: 15%;
  width: 150px;
  height: 150px;
  background: radial-gradient(circle, rgba(255, 160, 50, 0.5) 0%, rgba(255, 120, 20, 0.2) 40%, transparent 70%);
  animation: candleFlicker2 4s ease-in-out infinite alternate;
}

.candle-3 {
  top: 60%;
  left: 70%;
  width: 180px;
  height: 180px;
  background: radial-gradient(circle, rgba(255, 180, 80, 0.4) 0%, rgba(255, 140, 40, 0.2) 40%, transparent 70%);
  animation: candleFlicker3 3.5s ease-in-out infinite alternate;
}

/* 阴影纹理 */
.shadow-texture {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: 
    radial-gradient(circle at 25% 25%, rgba(0, 0, 0, 0.1) 0%, transparent 50%),
    radial-gradient(circle at 75% 75%, rgba(0, 0, 0, 0.08) 0%, transparent 50%),
    radial-gradient(circle at 50% 10%, rgba(0, 0, 0, 0.05) 0%, transparent 40%),
    radial-gradient(circle at 10% 90%, rgba(0, 0, 0, 0.06) 0%, transparent 40%);
  animation: shadowShift 40s ease-in-out infinite;
}

/* 动画定义 */
@keyframes twinkle {
  0%, 100% {
    opacity: 0.1;
    transform: scale(1);
  }
  25% {
    opacity: 0.3;
    transform: scale(1.1);
  }
  50% {
    opacity: 0.6;
    transform: scale(1.2);
  }
  75% {
    opacity: 0.2;
    transform: scale(1.05);
  }
}

@keyframes fogDrift1 {
  0%, 100% {
    transform: translate(-5px, -5px) rotate(0deg);
    opacity: 0.02;
  }
  25% {
    transform: translate(10px, -10px) rotate(90deg);
    opacity: 0.04;
  }
  50% {
    transform: translate(5px, 5px) rotate(180deg);
    opacity: 0.03;
  }
  75% {
    transform: translate(-10px, 10px) rotate(270deg);
    opacity: 0.05;
  }
}

@keyframes fogDrift2 {
  0%, 100% {
    transform: translate(5px, 5px) rotate(0deg);
    opacity: 0.03;
  }
  33% {
    transform: translate(-8px, 12px) rotate(120deg);
    opacity: 0.04;
  }
  66% {
    transform: translate(12px, -8px) rotate(240deg);
    opacity: 0.02;
  }
}

@keyframes fogDrift3 {
  0%, 100% {
    transform: translate(0px, 0px) rotate(0deg) scale(1);
    opacity: 0.02;
  }
  50% {
    transform: translate(-15px, 15px) rotate(180deg) scale(1.1);
    opacity: 0.04;
  }
}

@keyframes candleFlicker1 {
  0% {
    opacity: 0.015;
    transform: scale(1) rotate(0deg);
  }
  25% {
    opacity: 0.025;
    transform: scale(1.05) rotate(1deg);
  }
  50% {
    opacity: 0.02;
    transform: scale(0.98) rotate(-1deg);
  }
  75% {
    opacity: 0.03;
    transform: scale(1.02) rotate(0.5deg);
  }
  100% {
    opacity: 0.018;
    transform: scale(1) rotate(0deg);
  }
}

@keyframes candleFlicker2 {
  0% {
    opacity: 0.02;
    transform: scale(1) rotate(0deg);
  }
  30% {
    opacity: 0.028;
    transform: scale(1.03) rotate(-1deg);
  }
  60% {
    opacity: 0.015;
    transform: scale(0.97) rotate(1deg);
  }
  100% {
    opacity: 0.022;
    transform: scale(1) rotate(0deg);
  }
}

@keyframes candleFlicker3 {
  0% {
    opacity: 0.018;
    transform: scale(1) rotate(0deg);
  }
  40% {
    opacity: 0.025;
    transform: scale(1.04) rotate(0.8deg);
  }
  80% {
    opacity: 0.012;
    transform: scale(0.96) rotate(-0.8deg);
  }
  100% {
    opacity: 0.02;
    transform: scale(1) rotate(0deg);
  }
}

@keyframes shadowShift {
  0%, 100% {
    transform: translate(0px, 0px);
    opacity: 0.8;
  }
  25% {
    transform: translate(5px, -5px);
    opacity: 0.9;
  }
  50% {
    transform: translate(-3px, 3px);
    opacity: 0.7;
  }
  75% {
    transform: translate(-5px, -3px);
    opacity: 0.85;
  }
}

/* 响应式调整 */
@media (max-width: 768px) {
  .candle-glow {
    width: 120px !important;
    height: 120px !important;
  }
  
  .fog {
    filter: blur(25px);
  }
}

@media (max-width: 480px) {
  .candle-glow {
    width: 80px !important;
    height: 80px !important;
  }
  
  .fog {
    filter: blur(20px);
  }
  
  .star {
    filter: blur(0.3px);
  }
}
</style>